{extend name="base" /}
{block name="body"}
<style>
    .left{
        display:inline;display:inline-block;
        }
</style> 
<div class="layui-card">
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            {foreach name="list" item="d"}
            <li class="{if $date == $d.day}layui-this bg-success {/if}" style="padding:0 10px 0 10px;" ><a href="{:url('notice/detail',['date'=>$d['day']])}">{$d.day}</a></li>
            {/foreach}
        </ul>
        <div class="layui-tab-content">

           <div class="layui-form toolbar">
                <form action="{:request()->url()}" class="layui-form" method="get">
                <div class="left">
                    <input type="text" name="create_time" class="layui-input" id="create_time" placeholder="{:__('Created on')}">
                </div>

                <div class="left">
                    <button class="layui-btn layui-btn-normal"><i class="fa fa-search"></i> 搜索</button>
                </div>
                </form>
          
        </div>
            <table id="tableList" lay-filter="tableList"></table>
        </div>
    </div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="read">{:__('All set read')}</button>
        <button class="layui-btn layui-btn-sm" lay-event="unread">{:__('All unread')}</button>
    </div>
</script>

    <!-- 表格操作列 -->
    <script type="text/html" id="tableTBTrack">
        {{# if(d.status == '1'){ }}
        <a href="{:url('notice/reply_edit')}?id={{d.id}}&status=0" class="layui-btn layui-btn-sm ajax-action">未读</a>
        {{# }else{ }}
        <a href="{:url('notice/reply_edit')}?id={{d.id}}&status=1" class="layui-btn layui-btn-primary layui-btn-sm ajax-action">已读</a>
        {{# } }}
         {{# if({:$user.id} == '1'){ }}
        
        <a href="{:url('notice/reply_edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="410px" data-height="310px">{:__('modify')}</a>
        <a href="{:url('notice/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete" tiptext="确认删除">删除</a> 
        {{# }else{ }}
        
        <a class="layui-btn layui-btn-sm layui-btn-disabled" data-width="410px" data-height="310px">{:__('modify')}</a>
        <a class="layui-btn layui-btn-danger layui-btn-disabled layui-btn-sm">删除</a> 
        {{# } }}
    </script>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'util', 'dropdown'], function () {

        var table = layui.table;
        var laydate = layui.laydate;  // 日期
        // 搜索 start 引入时间组件laydate---------------------
        // 时间
        laydate.render({
            elem: '#create_time',
            theme: 'molv',
            trigger:'click',
            range: true
        });
        // 渲染回访表格
        var insTb = table.render({
            elem: '#tableList',
            toolbar: '#toolbarDemo',  //开启头部工具栏，并为其绑定左侧模板
            url: "{:url('notice/detail_json',['create_time'=>input('create_time')])}",
            where:{
                date:"{$date}",
            },
             page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
                 //,curr: 5 //设定初始在第 5 页
            ,groups: 5 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页
            ,prev: '<em>上一页</em>'
            ,next: '<em>下一页</em>'
            ,limit:'15'
            ,limits:['15','30','50','100','200','500']
            } ,
            cellMinWidth: 100,
            limit:'15',
            limits:[15,30,50,100,200,500,1000],
            size:'lg',even:true,
            cols: [[
                  {
                    type: 'checkbox'
                }, {
                    type:'numbers',
                    title:'#'
                }, {
                    field: 'article_id', 
                    align: 'left', 
                    sort: true, 
                    width: 90, 
                    title: '专区', 
                    templet: function(d){
                    
                    return d.article_id == 0 ?'聊天区':'评论区';
                }
                }, {
                    field: 'user_id', 
                    align: 'left', 
                    sort: true, 
                    width: 90, 
                    title: '回复人', 
                    templet: function(d){
                    return '<div><a href="/user/index">' + d.user_id + '</a></div>';
                }
                }, {
                    field: 'content', 
                    align: 'left', 
                    sort: true, 
                    title: '提醒事项'
                }, {
                    field: 'create_time', 
                    align: 'center', 
                    sort: true, 
                    title: '创建时间',
                    width: 200
                }, {
                    align: 'center', 
                    toolbar: '#tableTBTrack', 
                    title: '操作', 
                    width: 200
                }
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            }
        });

    });

        //头工具栏事件
        table.on('toolbar(tableList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'read':
             
                    var data = checkStatus.data;
                    var ids = [];
                    data.forEach(item => {
                        ids.push(item.id);
                    });
                    if (ids <= 0) {
                        return layer.msg('{:__('Please select a line')}', {icon: 0});
                    }
                 var index = layer.msg('{:__('Submitting, please wait')}', {
                   icon: 16,
                   time: false,
                   shade: 0.3
                 });
                  $.post('/notice/read', {id: ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                        }
                    }, 'json');
                    break;
                case 'unread':
                    var data = checkStatus.data;
                    var ids = [];
                    data.forEach(item => {
                        ids.push(item.id);
                    });
                    if (ids <= 0) {
                        return layer.msg('{:__('Please select a line')}', {icon: 0});
                    }
                 var index = layer.msg('{:__('Submitting, please wait')}', {
                   icon: 16,
                   time: false,
                   shade: 0.3
                 });
                  $.post('/notice/unread', {id: ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                        }
                    }, 'json');
                    break;
                case 'refresh':
                    location.reload();
                    break;
            }
        });
</script>
{/block}